<template>
  <view class="wrap">
    <image src="../../static/homeBg.png" class="homeBg"></image>
    <z-paging ref="paging">
      <template #top>
        <view class="pox">
          <status-bar></status-bar>
          <view class="head-nav">
            <template v-if="userInfo">
              <avatar :src='setUrl(userInfo.avatar)' styles='width: 72rpx; height: 72rpx;border: 1px solid #FFF;margin-right: 30rpx' @click="goUser"></avatar>
            </template>
            <view class="search" @click="goSearch">
              <uv-input placeholder="搜索社群，用户或内容" readonly border='none' prefixIcon='search' prefixIconStyle='color: #E43222;font-size: 48rpx;' placeholderStyle='font-size: 24rpx;color: #9C9C9C;font-weight: 400;' :customStyle="{backgroundColor: '#FFF', height: '72rpx', paddingLeft: '18rpx'}"></uv-input>
            </view>
            <view class="select" @click="openPupop">
              <image src="../../static/select.png" class="img"></image>
            </view>
          </view>
        </view>
      </template>
      <view class="base" v-if="pageShow">
        <view class="list">
          <view class="item" v-for="(item, index) in group" :key="index" @click="tapClick(item)">
            <view class="sub">
              <image :src="setUrl(item.logo_image)" class="img"></image>
              <template v-if="item.examine_status == 1">
                <view class="mark"></view>
                <view class="review">群主审核中</view>
              </template>
            </view>
            <view class="title">{{ item.name }}</view>
            <view class="foot">
              <view class="browse">
                <view class="avatar">
                  <image :src="setUrl(item.user.avatar)" class="img"></image>
                </view>
                <view class="name">{{ item.user.nickname }}</view>
              </view>
              <view class="browse">
                <view class="icon">
                  <image src="../../static/book.png" class="img"></image>
                </view>
                <view class="number">{{ item.theme_count }}</view>
              </view>
            </view>
          </view>
          <view class="item create">
            <view class="sub" @click="createGroup">
              <view class="group">
                <view class="new-image">
                  <image src="../../static/create.png" class="img"></image>
                </view>
                <view class="font">创建社群</view>
              </view>
            </view>
          </view>
        </view>
        <view class="week">
          <view class="head">
            <view class="name">每周必看</view>
            <view class="more" @click="goMore">
              <text class="test">更多优质社群</text>
              <!-- <uni-icons type="forward" size="28rpx" color='#B8B8B8'></uni-icons> -->
              <uv-icon name="arrow-right" color="#B8B8B8" size="28rpx"></uv-icon>
            </view>
          </view>
          <view class="look">
            <view class="box" v-for="(item, index) in 2" :key='index' @click="goRanking(index)">
              <view class="news">
                {{ index == 0 ? '人气榜' : '活跃榜' }}<text class="day">每周更新</text>
              </view>
              <view class="ass">
                <view class="item" v-for="(dt, udx) in newGroup[`group${index}`]" :key='udx'>
                  <view class="left">
                    <image :src="setUrl(dt.logo_image)" class="img"></image>
                  </view>
                  <view class="right">
                    <view class="title">{{ dt.association_name }}</view>
                    <view class="me" v-if="dt.user_info">
                      <view class="avatar">
                        <image :src="setUrl(dt.user_info.avatar)" class="img"></image>
                      </view>
                      <view class="name">{{ dt.user_info.nickname }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="interest">
          <view class="head">
            <view class="left">你可能感兴趣</view>
            <view class="right" @click="changeInter">
              <view class="replace">
                <image src="../../static/renew.png" class="img"></image>
              </view>
              <view class="font">换一批</view>
            </view>
          </view>
          <view class="maybe">
            <view class="item" v-for="(item, index) in inter" :key="index" @click="tapClick({apply_status: item.apply_status, id: item.association_id})">
              <view class="left">
                <image :src="setUrl(item.logo_image)" class="img"></image>
              </view>
              <view class="right">
                <view class="title">{{ item.association_name }}</view>
                <view class="desc">社群简介：{{ item.desc }}</view>
                <view class="foot">
                  <view class="me" v-if="item.user_info">
                    <view class="avatar">
                      <image :src="setUrl(item.user_info.avatar)" class="img"></image>
                    </view>
                    <text class="name">{{ item.user_info.nickname }}</text>
                  </view>
                  <view class="data">
                    <!-- <view class="bord">
                      <view class="icon">
                        <image src="../../static/book.png" class="img"></image>
                      </view>
                      <view class="num">155</view>
                    </view> -->
                    <view class="bord">
                      <view class="icon people">
                        <image src="../../static/people.png" class="img"></image>
                      </view>
                      <view class="num">{{ item.member_count }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="actionSheet">
        <uv-action-sheet ref="actionMenus" :actions="actions" title="请选择" cancelText='取消' :safeAreaInsetBottom='false' @select="select"></uv-action-sheet>
        
        <uv-modal ref="modal" title="提示" @confirm="confirm">
          <view style="text-align: center;">{{msg}}</view>
        </uv-modal>
      </view>
      <template #bottom>
        <tabbar :current='0'></tabbar>
      </template>
    </z-paging>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { post } from '@/api';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { useUser } from '@/store';
import { toast, getUser, setUrl } from '@/common';

const actionMenus = ref(null);
const modal = ref(null);

const imgUrl = useUser().imgUrl;
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
const actions = [{name: '创建社群', id: 1}, {name: '优质社群', id: 2}]
let pageShow = ref(false);
let search = ref('');
let menuShow = ref(true);
let group = ref([]);
let msg = ref('');
let userInfo = ref('');
let newGroup = ref({
  group0: [],
  group1: []
});
let inter = ref([]);

function getData(){
  const params = {
    page: 1,
    limit: 150,
    type_status: 1
  }
  post('api/association/getAssociationList', params, { custom: { toast: 0 } }).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      group.value = data;
      getUser().then(userData => {
        userInfo.value = userData;
        pageShow.value = true;
      })
    }
  })
}
// 人气榜,活跃榜
function getGroupRanking(index){
  const params = {
    limit: 3,
    show_status: index
  }
  post('api/association/getAssociationScoreRanking', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      newGroup.value[`group${index - 1}`] = data;
    }
  })
}
// 你可能感兴趣的社群
function getMaybeLike(){
  const params = {
    limit: 3
  }
  post('api/association/getMaybeLikeAssociationList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      inter.value = data;
    }
  })
}
// 每日登录拿积分
function getUserLoginScore(){
  post('api/user/getUserLoginScore', {}, { custom: {toast: true} }).then(res => {
    if(res.code == 1){
      const data = res.data;
      setTimeout(() => {
        if(data && data.score) toast(`每日登录，积分+${data.score}`);
      }, 2000)
    }
  })
}

onLoad(() => {
  getGroupRanking(1);
  getGroupRanking(2);
  getMaybeLike();
  setTimeout(() => {
    getUserLoginScore();
  }, 300)
  console.log(newGroup.value);
})
onShow(() => {
  getData();
})

function changeInter(){
  getMaybeLike();
}
function openPupop(){
  actionMenus.value.open();
}
function createGroup(){
  getUser().then(data => {
    if(data.identity == 1){
      if(data.score < 1000){
        return toast('积分不足');
      }
    }
    if(data.is_real_auth != 1) return toast('请先完成认证');
    uni.navigateTo({
      url: '/pages/group/index'
    });
  })
}
function tapClick(row){
  if(row.is_expire){
    msg.value = '该社群已到期，请联系管理员';
    modal.value.open();
    return;
  }
  const url = row.apply_status == 2 ? '/pages/group/yes-detail' : '/pages/group/not-detail'
  uni.navigateTo({
    url: `${url}?id=${row.id}`
  });
}
function select(value){
  if(value.id == 1){
    createGroup();
  }else{
    goMore();
  }
}
function confirm(){
  modal.value.close();
}
function goMore(){
  uni.navigateTo({
    url: '/pages/index/high'
  });
}
function goSearch(){
  uni.navigateTo({
    url: '/pages/index/search'
  });
}
function goUser(){
  uni.navigateTo({
  	url: '/pages/mine/index'
  });
}
function goRanking(index){
  let url = index == 0 ? 'popularity' : 'brisk';
  uni.navigateTo({
    url: `/pages/index/${url}`
  });
}
</script>

<style lang="scss" scoped>
  .actionSheet{
    min-height: 200rpx;
    :deep(.uv-action-sheet__header__icon-wrap){
      display: none;
    }
  }
  .base{
    padding: 0 30rpx;
    .interest{
      padding-top: 60rpx;
      .maybe{
        .item{
          width: 100%;
          display: flex;
          align-items: center;
          padding: 24rpx 0;
          border-bottom: 1px solid #EFEFEF;
          &:first-child{
            padding-top: 0;
          }
          &:last-child{
            border-bottom: 0;
          }
          .right{
            height: 162rpx;
            padding-left: 20rpx;
            flex: 1;
            position: relative;
            width: 0;
            .foot{
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              padding-left: 20rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .data{
                display: flex;
                align-items: center;
                .bord{
                  display: flex;
                  align-items: center;
                  &:last-child{
                    padding-left: 30rpx;
                  }
                  .num{
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #B8B8B8;
                    padding-left: 4rpx;
                  }
                  .icon{
                    width: 24rpx;
                    height: 24rpx;
                    font-size: 0;
                    &.people{
                      height: 21rpx;
                    }
                  }
                }
              }
            }
            .desc{
              font-weight: 400;
              font-size: 24rpx;
              color: #B8B8B8;
              padding-top: 6rpx;
              overflow:hidden;
              text-overflow: ellipsis;
              display:-webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient:vertical;
              -moz-box-orient:vertical;
              word-break: break-all;
            }
            .title{
              font-weight: 500;
              font-size: 28rpx;
              color: #2B2B2B;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
          .left{
            width: 162rpx;
            height: 162rpx;
            border-radius: 12rpx;
            overflow: hidden;
          }
        }
      }
      .head{
        width: 100%;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right{
          display: flex;
          align-items: center;
          .font{
            font-weight: 400;
            font-size: 28rpx;
            color: #B8B8B8;
            padding-left: 12rpx;
          }
          .replace{
            width: 30rpx;
            height: 32rpx;
            font-size: 0;
          }
        }
        .left{
          font-weight: 500;
          font-size: 32rpx;
          color: #3B3B3B;
        }
      }
    }
    .me{
      width: 100%;
      display: flex;
      align-items: center;
      .name{
        font-weight: 400;
        font-size: 22rpx;
        color: #737373;
        padding-left: 4rpx;
      }
      .avatar{
        width: 36rpx;
        height: 36rpx;
        overflow: hidden;
        border-radius: 50%;
      }
    }
    .week{
      padding-top: 30rpx;
      .look{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .box{
          width: 48%;
          min-height: 450rpx;
          border: 1px solid #E3E3E3;
          padding: 20rpx;
          box-sizing: border-box;
          .ass{
            .item{
              margin-bottom: 20rpx;
              display: flex;
              align-items: center;
              height: 100rpx;
              &:last-child{
                margin-bottom: 0;
              }
              .right{
                padding-left: 12rpx;
                height: 100rpx;
                flex: 1;
                width: 0;
                .title{
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #2B2B2B;
                  padding-bottom: 14rpx;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
              }
              .left{
                width: 100rpx;
                height: 100rpx;
                border-radius: 12rpx;
                overflow: hidden;
              }
            }
          }
          .news{
            font-weight: 500;
            font-size: 32rpx;
            color: #E43222;
            padding-bottom: 24rpx;
            .day{
              font-weight: 400;
              font-size: 24rpx;
              color: #B8B8B8;
              padding-left: 4rpx;
            }
          }
        }
      }
      .head{
        width: 100%;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
        }
        .more{
          display: flex;
          align-items: center;
          .test{
            font-weight: 400;
            font-size: 28rpx;
            color: #B8B8B8;
            padding-right: 8rpx;
          }
        }
      }
    }
    .list{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      padding-top: 46rpx;
      .item{
        width: 328rpx;
        height: 468rpx;
        margin-bottom: 30rpx;
        position: relative;
        &.create{
          height: auto;
          .sub{
            background-color: rgba(214, 0, 0, 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            .group{
              .new-image{
                width: 63rpx;
                height: 63rpx;
                margin: 0 auto;
              }
              .font{
                font-weight: 400;
                font-size: 24rpx;
                color: #A60000;
                padding-top: 20rpx;
              }
            }
          }
        }
        .foot{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          bottom: 0;
          .browse{
            display: flex;
            align-items: center;
            .number{
              font-weight: 400;
              font-size: 22rpx;
              color: #B8B8B8;
              padding-left: 6rpx;
            }
            .name{
              width: 150rpx;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
              font-weight: 400;
              font-size: 22rpx;
              color: #737373;
              padding-left: 6rpx;
            }
            .icon{
              width: 21rpx;
              height: 21rpx;
              font-size: 0;
            }
            .avatar{
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
              overflow: hidden;
            }
          }
        }
        .title{
          font-weight: 400;
          font-size: 28rpx;
          color: #2B2B2B;
          margin-top: 14rpx;
          overflow:hidden;
          text-overflow: ellipsis;
          display:-webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient:vertical;
          -moz-box-orient:vertical;
          word-break: break-all;
        }
        .sub{
          width: 328rpx;
          height: 328rpx;
          position: relative;
          border-radius: 12rpx;
          overflow: hidden;
          .review{
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            text-align: center;
            z-index: 3;
            width: 100%;
          }
          .mark{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba($color: #000000, $alpha: 0.47);
            z-index: 2;
          }
        }
      }
    }
  }
  .pox{
    position: relative;
    z-index: 2;
    padding-bottom: 20rpx;
    .head-nav{
      width: 100%;
      padding: 0 30rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      .select{
        width: 56rpx;
        height: 56rpx;
        margin-left: 30rpx;
      }
      .search{
        overflow: hidden;
        border-radius: 100rpx;
        flex: 1;
      }
    }
  }
  .homeBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
</style>
